import { Table, Button } from "antd";
import React, { useState } from "react";
import { useEffect } from "react";
import { Switch } from "antd";
import http from "../../../utils/axios.js";

export default function DataTable() {
  const onChange = (checked) => {
    console.log(`switch to ${checked}`);
  };
  const columns = [
    {
      title: "路线名称",
      dataIndex: "name",
      // width: 150,
      align: "center",
    },
    {
      title: "负责人员",
      dataIndex: "person",
      // width: 150,
      align: "center",
    },
    {
      title: "状态",
      dataIndex: "status",
      align: "center",
      render: () => <Switch defaultChecked onChange={onChange} />,
    },
    {
      title: "操作",
      dataIndex: "control",
      align: "center",
      render: () => (
        <>
          <Button type="primary">编辑</Button>
          &nbsp;&nbsp;
          <Button type="primary" danger>
            删除
          </Button>
        </>
      ),
    },
  ];
  const [total, setTotal] = useState(0);
  const pageSize = 5;
  const [pageNo, setPageNo] = useState(1);
  const [list, setList] = useState([]);

  const initData = async () => {
    const res = await http.get("/action/RouteManagement/findRouteList", {
      params: {
        currentPage: pageNo,
        pageSize: pageSize,
      },
    });
    console.log(res);
    if (res.status === 200) {
      // console.log(res.data.data.length);
      setTotal(res.data.data.length); // TODO need total from servise
      setPageNo(pageNo + 1);
      setList(
        res.data.data.map((e, i) => {
          return {
            key: e.route_id,
            NO: `${(pageNo - 2) * 10 + i + 1}`,
            name: e.route_name,
            person: e.route_responsible_person,
            statusS: e.route_status,
          };
        })
      );
      console.log(list);
    }
  };

  useEffect(() => {
    initData();
  }, []);
  return (
    <div className="dataList">
      <div>
        <span>数据列表</span>
        <button className="btn">添加</button>
      </div>
      <Table
        className="dataTable"
        columns={columns}
        dataSource={list}
        pagination={{
          total: total,
          pageSize: pageSize,
        }}
        /* scroll={{
          y: 240,
        }} */
      />
    </div>
  );
}
